<template>
  <div>
    <div class="mt17"></div>
    <div class="footer">
      <div>
        <img src="./foot.png" alt="">
        <span>{{footList.msg}}</span>
      </div>
      <div>
        <h2>{{footList.note}}</h2>
        <p><span>{{footList.phone}}  </span><span>400-800-6276</span></p>
      </div>
    </div>
    <div class="beian">
      <p><a href="http://www.miitbeian.gov.cn" target="_blank">{{footList.record1}}</a></p>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'vFooter',
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'footList': 'footList'
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$font-size-base:75;  //标注稿基准字体大小
$font-color-base:#333;  //基础字体颜色
// $bgColor:#f4f4f4;  //背景色
/*-------------font-size start-------------*/
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}
html,body,a{
  font-family: 'microsoft yahei','Helvetica','Verdana',sans-serif;
  @include font-dpr(12px);
  color: $font-color-base;
}
.mt17 {
  width: 100%;
  height: 17rem/$font-size-base;
  background-color: #f0f0f6
}
.footer {
  // display: flex;
  width: 690rem/$font-size-base;
  margin: 0 auto;
  padding: 45rem/$font-size-base 0;
  div {
    display: inline-block;
    // flex-direction: column;
    // justify-content: space-between;
    height: 200rem/$font-size-base;
    img {
      width: 156rem/$font-size-base;
      height: 156rem/$font-size-base;
      margin-bottom: 10rem/$font-size-base;
      display: block
    }
    span {
      font-size: 30rem/$font-size-base;
      color: #333333;
      text-indent: 8px
    }
    h2 {
      font-size: 24rem/$font-size-base;
      line-height: 36rem/$font-size-base;
      letter-spacing: 1rem/$font-size-base;
      color: #2154b9;
      margin-top: 15rem/$font-size-base;
    }
    p {
      margin-top: 20rem/$font-size-base;
      position: absolute;
      bottom: 0;
      span:nth-child(2) {
        font-size: 36rem/$font-size-base;
        color: #2154b9;
      }
    }
  }
  div:nth-child(2) {
    width: 6.5rem;
    float: right;
    position: relative;
    height: 200rem/$font-size-base;
  }
  div:nth-child(1) {
    span {
      font-size: 26rem/$font-size-base;
      color: #2154b9;
      display: block;
      text-indent: 13px;
    }
  }
}
.beian {
  width: 100%;
  // height: 70rem/$font-size-base;
  background-color: #2154b9;
  text-align: center;
  // line-height: 70rem/$font-size-base;
  a {
    text-decoration: none;
    color: #fff
  }
  p {
    font-size: 24rem/$font-size-base;
    letter-spacing: 1px;
    color: #fff;
    padding: .3rem .4rem
  }
}
/*-------------font-size end-------------*/
</style>
